<template>
  <view class="popup">
    <view class="main">
      <image :src="`${config.imgPath}/close.png`" class="close" @click="close"></image>
      <view class="title font-34-B">支付</view>
      <view class="amount flex-center flex-column flex-align-items">
        <view class="amount-label">所需支付的金额</view>
        <view class="amount-value font-56-B"><text class="font-36-B">￥</text>{{order.money}}</view>
      </view>
      <view class="pay-list">
        <view v-for="(item,index) in payList" :key="index" class="pay-item flex-between flex-align-items" @click="payCheck = item.value">
          <view class="pay-left flex flex-align-items">
            <image :src="item.img"></image>
            <text class="font-28-M">{{item.label}}</text>
          </view>
          <image v-if="item.value === payCheck" :src="`${config.imgPath}/payment/checked.png`" class="pay-right">
          </image>
          <image v-else :src="`${config.imgPath}/payment/no-check.png`" class="pay-right"></image>
        </view>
      </view>
      <view class="desc font-26-M">我同意购买守则，我也同意支付以下所示的总金额(含服务费)。</view>
      <view class="btn">
        <view class="bg-main1 font-28-B" @click="payConfirm">{{`确认订单 ￥${order.money}`}}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
//<payment-popup v-if="paymentPopupShow" :order="orderInfo" @close="paymentPopupChange" @confirm="paymentConfirm"></payment-popup>

import {
  ref
} from 'vue';
import { gotopay } from '@/js/pay.js'
import config from '@/js/config.js';
import api from '@/api/index.js';

const props = defineProps({
  order: {
    type: Object,
    default: {}
  }
});
const emits = defineEmits(['close', 'confirm']);

const payList = ref([
  // #ifdef APP-PLUS
  {
    label: '支付宝',
    img: `${config.imgPath}/payment/zfb.png`,
    value: 'alipay'
  },
  // #endif
  {
    label: '微信',
    img: `${config.imgPath}/payment/wx.png`,
    value: 'wxpay'
  }
]);
const payCheck = ref(null);

// 关闭弹窗
const close = () => {
  emits('close', null);
}
// 确认支付
const payConfirm = () => {
  if (payCheck.value === null) {
    uni.showToast({
      title: '请选择支付方式',
      icon: 'none'
    });
    return
  }
  let terminal = '';
  // #ifdef MP-WEIXIN
  terminal = 'weapp';
  // #endif
  // #ifdef APP-PLUS
  const systemInfo = uni.getSystemInfoSync();
  if (systemInfo.system.search('IOS') > -1) {
    terminal = 'ios';
  } else {
    terminal = 'android';
  }
  // #endif
  gotopay({
    ...props.order,
    payment: payCheck.value,
    terminal: terminal
  }, () => {
    emits('confirm');
  });
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    background: #fff;
    border-radius: 16rpx 16rpx 0px 0px;
    padding: 32rpx 48rpx 160rpx;

    .close {
      position: absolute;
      right: 48rpx;
      top: 32rpx;
      width: 32rpx;
      height: 32rpx;
    }

    .title {
      color: #333;
      margin-bottom: 24rpx;
    }

    .amount {
      height: 216rpx;
      background: rgba(249, 89, 77, 0.06);

      .amount-label {
        color: #333;
      }

      .amount-value {
        color: #f9594d;
      }
    }

    .pay-list {
      padding: 8rpx 0;

      .pay-item {
        padding: 32rpx 0;
        border-bottom: 2rpx solid #f6f6f6;

        &:last-child {
          border-bottom: none;
        }

        .pay-left {
          image {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            margin-right: 16rpx;
          }

          text {
            color: #333;
          }
        }

        .pay-right {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .desc {
      color: #999;
    }

    .btn {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 10;
      width: 100%;
      padding: 16rpx 32rpx 32rpx;
      background: #fff;

      view {
        height: 88rpx;
        border-radius: 16rpx;
        line-height: 88rpx;
        text-align: center;
        color: #fff;
      }
    }
  }
}
</style>